<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: GuoShuning
 * @LastEditTime: 2022-12-21 17:06:12
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./common/css/coommon.css" />
  <title>Document</title>
  <style>
    .body {
      padding: 0 !important;
      overflow: hidden;
    }
    .body .table {
      margin-top: 20px;
    }
    .body .table-body {
      height: 398px !important;
      overflow-y: auto;
    }
  </style>
</head>

<body class="ghcj2" id="app">
  <div class="body">
    <div class="table">
      <div class="table-header">
        <div class="tr">
          <div class="td" style="width: 15%">创建时间</div>
          <div class="td" style="width: 60%">记录详情</div>
          <div class="td center" style="width: 35%">签字</div>
        </div>
      </div>
      <div class="table-body">
        <div class="tr" v-for="item in list">
          <div class="td" style="width: 15%">{{item.value}}</div>
          <div class="td" style="width: 60%">{{item.value}}</div>
          <div class="td center" style="width: 35%">{{item.value}}</div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <span>共 {{total}} 条</span>
      <ul>
        <li @click="shang"><i class="bi bi-chevron-left"></i></li>
        <li v-show="start > 0" @click="()=>{
              if(start > 0){
                params.page = start;
                end-=3
                start-=3
              }
            }">
          ...
        </li>
        <li @click="onCurrentPage(item)" v-for="item in totalPage" v-show="item < end && item > start"
          :class="[item == params.page ? 'active' :'']">
          {{item}}
        </li>
        <li v-show="end <= totalPage" @click="()=>{
              if(end <= totalPage){
              params.page = end;
              end+=3
              start+=3
              }
            }">
          ...
        </li>
        <li @click="next"><i class="bi bi-chevron-right"></i></li>
      </ul>
    </div>
  </div>
</body>
<script src="./common/js/vue.js"></script>
<script type="module">
  import DiaLog from "./common/js/diaLog.js";
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        total: 0,
        totalPage: 0,
        start: 0,
        end: 4,
        list: [],
        params: {
          page: 1,
          limit: 10,
        },
      };
    },
    //页面初始化加载
    mounted() {
      console.log("页面初始化加载");
      this.get();
    },
    //所有函数都写在这里
    methods: {
      shang() {
        if (this.params.page > 1) this.params.page--;
        if (this.params.page < this.start + 1) {
          this.end -= 3;
          this.start -= 3;
        }
        this.get();
      },
      next() {
        if (this.params.page < this.totalPage) this.params.page++;
        if (this.params.page > this.end - 1) {
          this.end += 3;
          this.start += 3;
        }
        this.get();
      },
      onCurrentPage(page) {
        this.params.page = page;
      },
      //接口
      get() {
        // ajax 请求
        // $.ajax()
        this.totalPage = 10; // 总页数
        this.total = 100; //总条数
        this.list = [
          {
            value: "吴恒",
          },
        ];
      },
    },
  }).mount("#app");

</script>

</html>